<template>
    <div class="password-form-container">
        <el-dialog :visible.sync="dialogVisible"
                   title="修改个人信息"
                   :append-to-body='true'
                   width="30%" @close="close">
            <el-form ref="infoForm"
                     status-icon
                     label-position="right"
                     :rules="infoRules"
                     :model="infoForm">
                <el-form-item prop="nickname" label="昵称：">
                    <el-input
                            style="width: 80%"
                            maxlength="20"
                            show-word-limit
                            autocomplete="off"
                            v-model="infoForm.nickname"/>
                </el-form-item>

                <el-form-item prop="email" label="邮箱：">
                    <el-input
                            style="width: 80%"
                            maxlength="50"
                            show-word-limit
                            autocomplete="off"
                            v-model="infoForm.email"
                            placeholder="请输入邮箱"/>
                </el-form-item>

                <el-form-item prop="check" label="性别：">
                    <el-radio-group v-model="infoForm.sex">
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                        <el-radio :label="2">保密</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="update" class="password-btn" round>确认修改</el-button>
                <el-button @click="close" round>取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import {getUserById,updateUser} from '@/api/user';
  import {validEmail, validNormal} from '@/validate/register';
  import { mapGetters} from 'vuex';

  export default {
    inject: ['reload'],
    data(){

      //检验昵称
      const validateNickname = (rule, value, callback) => {
        if (value.length < 3 || value.length > 20 || !validNormal(value)){
          callback(new  Error("请输入正确昵称，长度在3-20位之间的任意字符"))
        }
        else callback()
      }

      //检验邮箱
      const validateEmail = (rule, value, callback) => {
        if (!validEmail(value)){
          callback(new Error("请输入正确邮箱"));
        }
        else callback()
      }

      return{
        dialogVisible: false,
        infoForm:{
          userId: '',
          nickname: '',
          email: '',
          sex: ''
        },

        infoRules:{
          nickname:[{validator: validateNickname,trigger: 'blur'}],
          email:[{validator: validateEmail,trigger: 'blur'}]
        }
      }
    },

    methods: {
      open(){
        this.dialogVisible = true
        this.infoForm.userId = this.userId
        getUserById(this.userId).then(result => {
          let {code,data} = result
          if (code === 20000){
            this.infoForm.nickname = data.item.nickname
            this.infoForm.email = data.item.email
            this.infoForm.sex = data.item.sex
          }
        })
      },

      close(){
        this.$refs.infoForm.resetFields();
        this.dialogVisible = false
        this.resetForm()
      },

      resetForm () {
        this.infoForm.userId = ''
        this.infoForm.nickname = ''
        this.infoForm.email = ''
        this.infoForm.sex = ''
      },

      update(){
        this.$refs.infoForm.validate((valid) => {
          if (valid) {
            //检验通过
            updateUser(this.userId,this.$qs.stringify(this.infoForm)).then(result => {
              let {code} = result
              if (code === 20000){
                this.reload()
                this.$message.success("修改成功！")
              }
              else {
                this.$message.error(result.message)
              }
            })
          } else {
            return false;
          }
        });
      },
    },

    computed: {
      ...mapGetters({
        'userId': 'id'
      })
    },

  }
</script>

<style scoped>
    .password-btn{
        background-color: #f20d0d;
        color: #FFFFFF;
        border-color: #FFFFFF;
    }
</style>
